<template>
	<view class="">
		<view class="view_item">
			<view class="title">输入手机号</view>
			<view class="ipt">
				<input v-model="mobile" type="number" placeholder="请输入">
			</view>
		</view>

		<view class="view_item">
			<view class="title">输入验证码</view>
			<view class="yzm">
				<input v-model="code" type="number" placeholder="请输入">
				<text @click="getCode">{{getCodeText}}</text>
			</view>
		</view>

		<view class="fixed-bottom plr-36 pb-80">
			<u-button type="primary" shape="square" @click="gochange">立即绑定</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				mobile:'',
				code:'',
				getCodeText: '获取验证码',
				getCodeisWaiting: false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			// uni.setNavigationBarTitle({
			// 	title: '当前手机号'
			// });
		},
		methods: {
			gochange() {
				if (this.mobile == '') {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
				} else if (this.code == '' || this.code != '8888') {
					uni.showToast({
						title: '验证码不正确',
						icon: "none"
					});
				} else {
					this.$http('user/changemobile', {
						mobile: this.mobile,
						captcha: this.code
					}, "POST").then(data => {
						uni.showToast({
							title: '修改成功',
						})
						setTimeout(function(){
							uni.navigateBack()
						},500)
					}).catch(data => {
				
					})
				}
			},

			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				//示例用定时器模拟请求效果
				// this.$api.getCode({
				// 	mobile: this.form.mobile,
				// 	event: 'mobilelogin'
				// }).then(res => {
				// 	this.$utils.showToast(res.msg)
				// 	if (res.code == 1) {
				// 		this.setTimer(); //调用定时器方法
				// 	}
				// })
				this.setTimer(); //调用定时器方法
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view_item {
		width: 90%;
		margin: auto;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			margin-top: 45rpx;
		}

		.ipt {
			width: 100%;
			height: 90rpx;
			margin-top: 24rpx;
			background: #F6F6F6;
			border-radius: 16rpx;

			input {
				padding: 0 30rpx;
				position: relative;
				top: 15px;
			}
		}

		.yzm {
			width: 100%;
			height: 90rpx;
			margin-top: 24rpx;
			background: #F6F6F6;
			border-radius: 16rpx;

			input {
				display: inline-block;
				width: 60%;
				padding: 0 30rpx;
				position: relative;
				top: 5px;
			}

			text {
				display: inline-block;
				margin-top: 17rpx;
				width: 180rpx;
				height: 56rpx;
				background: #014495;
				border-radius: 28rpx;
				color: #FFF;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}

	/deep/.u-primary-hover {
		background-color: $blue !important;
	}

	.img {
		margin-top: 160rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 80rpx;
	}
</style>
